<template>
  <div>
    <el-form
      :model="formData"
      label-position="left"
      label-width="180px"
      class="box-nihss"
    >
      <el-row class="inner_indent">
        <div class="radio-mrs">
          <el-form-item label="意识水平：" label-width="106px">
            <el-radio-group
              v-model="formData.nihssList[0]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(levelItem, levelIndex) in levelList"
                :key="'level' + levelIndex"
                :label="levelItem.levelCode"
              >
                {{ levelItem.levelName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item
            label="意识水平提问（月份、年龄）："
            label-width="240px"
          >
            <el-radio-group
              v-model="formData.nihssList[1]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(askItem, askIndex) in askList"
                :key="'ask' + askIndex"
                :label="askItem.askCode"
              >
                {{ askItem.askName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item
            label="意识水平提问（睁闭眼、握拳松开）"
            label-width="240px"
          >
            <el-radio-group
              v-model="formData.nihssList[2]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(askItem, askIndex) in askList"
                :key="'ask' + askIndex"
                :label="askItem.askCode"
              >
                {{ askItem.askName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="眼睛-凝视：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[3]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(gazeItem, gazeIndex) in gazeList"
                :key="'gaze' + gazeIndex"
                :label="gazeItem.gazeCode"
              >
                {{ gazeItem.gazeName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="眼睛-视野：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[4]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(viewItem, viewIndex) in viewList"
                :key="'view' + viewIndex"
                :label="viewItem.viewCode"
              >
                {{ viewItem.viewName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="面部-面瘫：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[5]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(paralysisItem, paralysisIndex) in paralysisList"
                :key="'paralysis' + paralysisIndex"
                :label="paralysisItem.paralysisCode"
              >
                {{ paralysisItem.paralysisName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div class="radio-mrs">
          <el-form-item label="上肢运动（左上肢）：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[6]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(limbItem, limbIndex) in limbList"
                :key="'limb' + limbIndex"
                :label="limbItem.limbCode"
              >
                {{ limbItem.limbName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div class="radio-mrs">
          <el-form-item label="上肢运动（右上肢）：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[7]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(limbItem, limbIndex) in limbList"
                :key="'limb' + limbIndex"
                :label="limbItem.limbCode"
              >
                {{ limbItem.limbName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div class="radio-mrs">
          <el-form-item label="下肢运动（左下肢）：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[8]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(legItem, legIndex) in legList"
                :key="'leg' + legIndex"
                :label="legItem.legCode"
              >
                {{ legItem.legName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div class="radio-mrs">
          <el-form-item label="下肢运动（右下肢）：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[9]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(legItem, legIndex) in legList"
                :key="'leg' + legIndex"
                :label="legItem.legCode"
              >
                {{ legItem.legName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="肢体共济失调：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[10]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(limbAtaxiaItem, limbAtaxiaIndex) in limbAtaxiaList"
                :key="'limbAtaxia' + limbAtaxiaIndex"
                :label="limbAtaxiaItem.limbAtaxiaCode"
              >
                {{ limbAtaxiaItem.limbAtaxiaName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="感觉：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[11]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(feelItem, feelIndex) in feelList"
                :key="'feel' + feelIndex"
                :label="feelItem.feelCode"
              >
                {{ feelItem.feelName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="语言（命名、阅读测试）：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[12]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(langItem, langIndex) in langList"
                :key="'lang' + langIndex"
                :label="langItem.langCode"
              >
                {{ langItem.langName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item
            label="构音障碍（读或重复表上的单词）："
            label-width="240px"
          >
            <el-radio-group
              v-model="formData.nihssList[13]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(obstacleItem, obstacleIndex) in obstacleList"
                :key="'obstacle' + obstacleIndex"
                :label="obstacleItem.obstacleCode"
              >
                {{ obstacleItem.obstacleName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent">
        <div>
          <el-form-item label="消退或不注意忽视：" label-width="180px">
            <el-radio-group
              v-model="formData.nihssList[14]"
              @change="nihssChange"
            >
              <el-radio
                v-for="(subsideItem, subsideIndex) in subsideList"
                :key="'subside' + subsideIndex"
                :label="subsideItem.subsideCode"
              >
                {{ subsideItem.subsideName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-row>
      <el-row class="inner_indent" type="flex">
        <div class="inner_small">
          <el-form-item label="NIHSS评分结果：" label-width="130px">
            <el-input v-model="formData.leaveNihssTotal" disabled />
          </el-form-item>
        </div>
        <div class="vertical-center">分</div>
        <div>
          <el-form-item label="" label-width="0px">
            <el-input v-model="formData.nihssDiscribe" disabled />
          </el-form-item>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'nihss',
    event: 'getSelect'
  },
  props: {
    nihss: {
      default: '',
      type: String
    },
    nihssTotal: {
      default: '',
      type: String
    }
  },

  data() {
    return {
      formData: {
        nihssList: [...Array(15)].map(x => "0")
      },
      levelList: [
        { levelName: '清醒，反应灵敏', levelCode: '0' },
        {
          levelName: '嗜睡，轻微刺激能唤醒，可回答问题，执行指令',
          levelCode: '1'
        },
        {
          levelName:
            '昏睡或反应迟钝，需反复刺激、强烈或疼痛刺激才有非刻板的反应',
          levelCode: '2'
        },
        {
          levelName:
            '昏迷，仅有反射性活动或自发性反应或完全无反应、软瘫、无反射',
          levelCode: '3'
        }
      ],
      // 意识水平提问（月份、年龄）||意识水平提问（睁闭眼、握拳松开）
      askList: [
        { askName: '两项均正确', askCode: '0' },
        { askName: '一项正确', askCode: '1' },
        { askName: '两项均不正确', askCode: '2' }
      ],
      // 眼睛-凝视
      gazeList: [
        { gazeName: '正常', gazeCode: '0' },
        {
          gazeName:
            '部分凝视麻痹（单眼或双眼凝视异常，但无强迫凝视或完全凝视麻痹）',
          gazeCode: '1'
        },
        {
          gazeName:
            '部分凝视麻痹（单眼或双眼凝视异常，但无强迫凝视或完全凝视麻痹）',
          gazeCode: '2'
        }
      ],
      // 眼睛-视野
      viewList: [
        { viewName: '无视野缺损', viewCode: '0' },
        { viewName: '部分偏盲', viewCode: '1' },
        { viewName: '完全偏盲', viewCode: '2' },
        { viewName: '双侧偏盲（包括皮质盲）', viewCode: '3' }
      ],
      // 面部-面瘫
      paralysisList: [
        { paralysisName: '正常', paralysisCode: '0' },
        {
          paralysisName: '轻微（微笑时鼻唇沟变平、不对称）',
          paralysisCode: '1'
        },
        {
          paralysisName: '部分（下面部完全或几乎完全瘫痪）',
          paralysisCode: '2'
        },
        {
          paralysisName: '完全（单或双侧瘫痪，上下面部缺乏运动）',
          paralysisCode: '3'
        }
      ],
      // 上肢运动
      limbList: [
        { limbName: '无下落，置肢体于90o （或45o ）坚持10秒', limbCode: '0' },
        {
          limbName: '能抬起但不能坚持10秒，下落时不撞击床或其他支持物',
          limbCode: '1'
        },
        { limbName: '试图抵抗重力，但不能维持坐位90o或仰位45o', limbCode: '2' },
        { limbName: '不能抵抗重力，肢体快速下落', limbCode: '3' },
        { limbName: '无运动', limbCode: '4' },
        { limbName: '截肢或关节融合(解释：5a左上肢; 5b右上肢)', limbCode: '9' }
      ],
      // 下肢运动
      legList: [
        { legName: '无下落，于要求位置坚持5秒', legCode: '0' },
        { legName: '5秒末下落，不撞击床', legCode: '1' },
        { legName: '5秒内下落到床上，可部分抵抗重力', legCode: '2' },
        { legName: '立即下落到床上，不能抵抗重力', legCode: '3' },
        { legName: '无运动', legCode: '4' },
        { legName: '截肢或关节融合(解释：5a左上肢; 5b右上肢)', legCode: '9' }
      ],
      // 肢体共济失调
      limbAtaxiaList: [
        { limbAtaxiaName: '无共济失调', limbAtaxiaCode: '0' },
        { limbAtaxiaName: '一个肢体有', limbAtaxiaCode: '1' },
        { limbAtaxiaName: '两个肢体有', limbAtaxiaCode: '2' },
        {
          limbAtaxiaName: '截肢或关节融合(解释：左上肢1=有,2=无)',
          limbAtaxiaCode: '9'
        }
      ],
      // 感觉
      feelList: [
        { feelName: '正常', feelCode: '0' },
        {
          feelName:
            '轻-中度感觉障碍，（患者感觉针刺不尖锐或迟钝，或针刺感缺失但有触觉）',
          feelCode: '1'
        },
        { feelName: '重度-完全感觉缺失（面、上肢、下肢无触觉）', feelCode: '2' }
      ],
      // 语言（命名、阅读测试）
      langList: [
        { langName: '正常', langCode: '0' },
        {
          langName: '轻-中度失语：流利程度和理解能力部分下降，但表达无明显受限',
          langCode: '1'
        },
        {
          langName:
            '严重失语，交流是通过患者破碎的语言表达，听者须推理、询问、猜测，交流困难',
          langCode: '2'
        },
        {
          langName: '不能说话或者完全失语，无言语或听力理解能力',
          langCode: '3'
        }
      ],
      // 构音障碍（读或重复表上的单词）
      obstacleList: [
        { obstacleName: '正常', obstacleCode: '0' },
        {
          obstacleName: '轻-中度，至少有些发音不清，虽有困难但能被理解',
          obstacleCode: '1'
        },
        {
          obstacleName:
            '言语不清，不能被理解，但无失语或  与失语不成比例，或失音',
          obstacleCode: '2'
        },
        { obstacleName: '气管插管或其他物理障碍', obstacleCode: '9' }
      ],
      // 消退或不注意忽视
      subsideList: [
        { subsideName: '正常', subsideCode: '0' },
        {
          subsideName:
            '视、触、听、空间觉或个人的忽视；或对一种感觉的双侧同时刺激忽视',
          subsideCode: '1'
        },
        {
          subsideName:
            '严重的偏侧忽视或一种以上的偏侧忽视；不认识自己的手；只能对一侧空间定位',
          subsideCode: '2'
        }
      ]
    }
  },
  watch: {
    nihss() {
      this.$set(this.formData, 'nihssList', this.nihss.split('|'))
      console.log("this.formData",this.formData)
    },
    nihssTotal() {
      this.$set(this.formData, 'leaveNihssTotal', parseInt(this.nihssTotal))
      this.nihssGrade()
    }
  },
  created() {},
  methods: {
    nihssChange() {
      this.formData.leaveNihssTotal = 0
      const nihssArr = JSON.parse(JSON.stringify(this.formData.nihssList))
      nihssArr.forEach((el) => {
        if (el) this.formData.leaveNihssTotal += parseInt(el)
      })
      this.nihssGrade()
    },
    nihssGrade() {
      const score = parseInt(this.formData.leaveNihssTotal)
      if (score >= 0 && score <= 1) {
        this.formData.nihssDiscribe = '正常或近乎正常'
      }
      if (score >= 1 && score <= 4) {
        this.formData.nihssDiscribe = '轻度卒中/小卒中'
      }
      if (score >= 5 && score <= 15) {
        this.formData.nihssDiscribe = '中度卒中'
      }
      if (score >= 15 && score <= 20) {
        this.formData.nihssDiscribe = '中-重度卒中'
      }
      if (score >= 21) {
        this.formData.nihssDiscribe = '重度卒中'
      }
      this.$emit('getSelect', this.formData.nihssList.join('|'))
      this.$emit('getTotal', this.formData.leaveNihssTotal + '')
    }
  }
}
</script>

<style lang="scss" scoped>
.box-nihss {
  font-size: 14px;
  color: #606266;
  .inner_indent {
    padding-left: 15px;
  }
  .radio {
    &-mrs {
      .el-radio {
        min-width: 400px;
        margin-top: 6px;
      }
    }
  }
}
</style>
<style lang="scss">
.box-nihss {
  .el-form-item {
    margin-top: 4px;
    margin-bottom: 4px;
    &__label {
      font-weight: normal;
    }
    &--medium {
      .el-form-item {
        &__label {
          line-height: 25px;
        }
        &__content {
          line-height: 25px;
        }
      }
    }
  }
  .el-input--medium {
    .el-input__inner {
      height: 25px;
      line-height: 25px;
      padding-left: 10px;
    }
    .el-input__icon {
      line-height: 25px;
    }
  }
  .el-select {
    margin-right: 60px;
  }
  .el-date-editor.el-input {
    width: 195px;
    margin-right: 60px;
  }
  .date {
    .el-input--medium {
      .el-input__inner {
        padding-left: 30px;
        padding-right: 20px;
      }
    }
  }
  .inner_indent {
    padding-left: 15px;
  }
  .inner_small {
    margin-right: 5px;
    width: 200px;
  }
  .vertical-center {
    display: flex;
    align-items: center;
    padding-left: 0px;
    padding-right: 10px;
  }
}
</style>
